<!DOCTYPE html>
<style>
#searchbar {
    bottom: 0; /* Useful for seeing the issue visually. */
    position: fixed;
}
#recentlink {
    background: purple;
    width: 150px;
    height: 150px;
}
header {
    padding: 10px;
    position: relative;
    z-index: 50;
    backface-visibility: hidden;
}
</style>
To manually test, just scroll down, there should be no purple trace.
<header>
    <div id="searchbar">
        <div id="recentlink"></div>
    </div>
</header>

<!-- Used to have some overflowing content to scroll -->
<div style="height: 5000px"></div>

<script src="../resources/text-based-repaint.js" type="text/javascript"></script>
<script>
window.scrollTo(0, 1000);

window.testIsAsync = true;
if (window.testRunner)
    testRunner.waitUntilDone();

function repaintTest()
{
    window.scrollBy(0, 400);
    finishRepaintTest();
}

// We need to skip 2 frames for the bug to show under DRT.
window.requestAnimationFrame(function() {
    runRepaintAndPixelTest();
});
</script>

